<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>博文详情页</title>
    <link th:href="@{/js/el/element.css}" rel="stylesheet"  type="text/css"/>
    <script th:src="@{/js/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/el/element.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.js}" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <div th:include="~{common/head-details::head}"></div>

        <div class="d1">
            <div style="background-color: lightgreen">
                文章标题: <span th:utext="${blog.getTitle()}"></span>
            </div>

            <div class="d2">
                <div>
                    作者: <span th:utext="${blog.getAuthor()}"></span>
                </div>

                <div>
                    发表时间: <el-date-picker
                        th:value="${blog.getTime()}"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
                </div>
            </div>
        </div>
        <!--同步--><!--内容-->
        <div class="d3" th:utext="${content.getContent()}">

        </div>
        <!--异步-->
        <!--<div v-html="content">-->

        <!--</div>-->
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data:{
            blogs:[],
            blog:{},
        },
        methods:{

        },
        mounted: function(){

        }
    })
</script>
<style>
    .d1{
        border: 1px solid #000000;
        margin-top: 15px;
    }
    .d2{
        margin-top: 25px;
        display: flex;
        justify-content: space-between;
    }
    .d3{
        border: 1px solid #000000;
        margin-top: 15px;
        height: 600px;
    }
</style>
</html>